<template>
  <div class="content-container">
    <el-row class="row">
      <el-col :span="4">
        <member-menu active="learn-record"/>
      </el-col>
      <el-col :span="20">
        <el-row class="learn-record-container">
          <el-col :span="6" class="learn-record-el-col">
            <div class="learn-record-list">
              <div class="learn-record-item" @click="itemClick(item.id)" :class="{'active': item.id === activeId}" v-for="item in learnRecordList" :key="item.id">
                <!--                <div class="learn-record-tag">-->
                <!--                  JAVA-->
                <!--                  <div class="top-right-angle"></div>-->
                <!--                  <div class="bottom-right-angle"></div>-->
                <!--                </div>-->
                <p class="learn-record-title" :title="item.name">{{item.name}}</p>
                <div class="learn-record-date"><span>{{item.endTime}}</span>到期</div>
                <div class="learn-record-process" style="display: flex">
                  <div style="width: 50%;line-height: 40px;" :style="item.signUp && item.signUp.status === 'completed' ? 'color: green;' : ''">{{item.signUp ? signUpStatusMap[item.signUp.status] : ""}}</div>
                  <div style="text-align: right;width: 50%;">
                    <el-button type="text" @click.stop="showHomework(item)">作业</el-button>
                  </div>
                  <!--                  <el-progress :percentage="item.percentage" :format="formatProgress" :color="customColorMethod(item.percentage)"></el-progress>-->
                </div>
              </div>
            </div>
            <el-dialog v-model="homeworkDialog" width="800px" :before-close="hideHomework">
              <homework v-if="homeworkDialog" :lesson="homeworkLesson" :callback="hideHomework"/>
              <template #footer>
                <div class="dialog-footer">
                  <el-button type="text" @click="hideHomework">关闭</el-button>
                </div>
              </template>
            </el-dialog>
          </el-col>
          <el-col :span="18">
            <div class="learn-record-detail" v-if="currentChapterSection.id">
              <div class="learn-record-detail-top-left">
                <div>
                  <div class="learn-record-detail-top-left-text">{{lesson.name}}</div>
                </div>
              </div>
              <div class="learn-record-detail-top-right">
                <div class="ctrl-item action-item">
                  <div class="comments-ctn" title="点击发表您对本门课程的评价">
                    <router-link target="_blank" :to="{path: '/learn/detail', query: {id: lesson.id, position: 'comment'}}" class="favorites-cover">
                      <i class="el-icon-chat-dot-square"></i>
                      评价
                    </router-link>
                  </div>
                </div>
                <div class="ctrl-item action-item before-line">
                  <span>
                    <router-link target="_blank" :to="{path: '/learn/detail', query: {id: lesson.id}}" class="favorites-cover">
                      <i class="el-icon-info"></i>
                      查看详情
                    </router-link>
                  </span>
                </div>
              </div>
              <div>
                <div v-if="currentLessonChapter && currentLessonChapter.id">
                  <h2>当前章节</h2>
                  <div class="detail-item">
                    <el-menu class="el-menu-vertical" :default-openeds="[currentLessonChapter.id + '']">
                      <el-submenu :index="currentLessonChapter.id + ''">
                        <template #title>
                          <i class="el-icon-location"></i>
                          <span>{{currentLessonChapter.title}}</span>
                        </template>
                        <el-menu-item @click="learnChapterSection(chapterSection)" :index="currentLessonChapter.id + '-' + i" v-for="(chapterSection, i) in currentLessonChapter.chapterSectionList" :key="chapterSection.id">
                          <template #title>
                            <div class="message-item-content" :title="chapterSection.title">
                              <i class="el-icon-video-play"></i>
                              {{chapterSection.title}}
                              <el-button size="small" @click="learnChapterSection(chapterSection)" v-if="currentLessonChapterSection.id === chapterSection.id" class="detail-item-button">继续学习</el-button>
                            </div>
                          </template>
                        </el-menu-item>
                      </el-submenu>
                    </el-menu>
                  </div>
                </div>
                <h2 class="sections-title">全部章节
                  <span class="section-nums">(共{{totalChapterSection}}节)</span>
                </h2>
                <div class="detail-item">
                  <el-menu class="el-menu-vertical" :default-openeds="defaultOpenedIndexList">
                    <el-submenu :index="index + ''" v-for="(lessonChapter, index) in lessonChapterList" :key="lessonChapter.id">
                      <template #title>
                        <div class="slot-title" :title="lessonChapter.title">{{lessonChapter.title}}</div>
                      </template>
                      <el-menu-item @click="learnChapterSection(chapterSection)" :index="index + '-' + i" v-for="(chapterSection, i) in lessonChapter.chapterSectionList" :key="chapterSection.id">
                        <template #title>
                          <div class="message-item-content" :title="chapterSection.title">
                            <i class="el-icon-video-play"></i>
                            {{chapterSection.title}}
                          </div>
                        </template>
                      </el-menu-item>
                    </el-submenu>
                  </el-menu>
                </div>
              </div>
            </div>
            <div class="learn-record-detail" v-else>
              暂无学习记录
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {ref} from "vue"
  import router from "../../../router"
  import memberMenu from "../menu/index"
  import {getLesson, getLessonChapterList, getRecordLessonList} from "../../../api/learn/lesson"
  import Homework from "@/views/learn/homework";

  export default {
    name: "memberMessage",
    components: {
      Homework,
      memberMenu
    },
    setup() {
      const param = ref({
        current: 1,
        size: 20
      })
      let activeId = ref(1)
      const learnRecordList = ref([])
      const lesson = ref({})
      const lessonChapterList = ref([])
      const defaultOpenedIndexList = ref([])
      const currentChapterSection = ref({})
      const currentLessonChapter = ref({
        id: ""
      })
      const currentLessonChapterSection = ref({})
      const totalChapterSection = ref(0)
      const customColorMethod = function(percentage) {
        if (percentage < 30) {
          return "#909399";
        } else if (percentage < 70) {
          return "#e6a23c";
        } else {
          return "#67c23a";
        }
      }
      const formatProgress = function(percentage) {
        return "已学习" + `${percentage}%`;
      }
      const getRecordChapterSection = () => {
        // 已学习章节
        let recordChapterSectionIdList = []
        for (const record of lesson.value.recordList) {
          if (recordChapterSectionIdList.indexOf(record.lessonChapterSectionId) === -1) {
            recordChapterSectionIdList.push(record.lessonChapterSectionId)
          }
        }
        let section
        // let chapterIndex = 0;
        // let chapterSectionIndex;
        for (const lessonChapter of lessonChapterList.value) {
          // chapterSectionIndex = 0
          for (const chapterSection of lessonChapter.chapterSectionList) {
            // 第一个没有学习的章节
            if (recordChapterSectionIdList.indexOf(chapterSection.id) === -1) {
              section = chapterSection
              currentLessonChapterSection.value = chapterSection
              currentLessonChapter.value = lessonChapter
              break;
            }
            // chapterSectionIndex++
          }
          if (section) {
            break
          }
          // chapterIndex++
        }
        if (section) {
          currentChapterSection.value = section
        } else {
          currentChapterSection.value = lessonChapterList.value[0].chapterSectionList[0]
        }
      }
      const loadLesson = function(id) {
        activeId.value = id;
        getLesson(id, (res) => {
          lesson.value = res
          getLessonChapterList({lessonId: res.id}, r => {
            lessonChapterList.value = r.list
            if (r.list && r.list.length) {
              let total = 0
              for (let i = 0; i < r.list.length; i++) {
                defaultOpenedIndexList.value.push(i + "");
                if (r.list[i].chapterSectionList && r.list[i].chapterSectionList.length) {
                  total += r.list[i].chapterSectionList.length
                }
              }
              totalChapterSection.value = total
            }
            // 获取当前学习到的课程
            getRecordChapterSection()
          })
        })
      }
      const itemClick = function(id) {
        activeId.value = id;
        loadLesson(id)
      }
      const load = function() {
        getRecordLessonList(param.value, res => {
          for (const record of res.list) {
            learnRecordList.value.push(record)
          }
          if (learnRecordList.value && learnRecordList.value.length && !lesson.value.id) {
            loadLesson(res.list[0].id)
          }
        })
      }
      load()
      const learnChapterSection = function(chapterSection) {
        router.push({path: "/learn/detail", query: {id: lesson.value.id, sectionId: chapterSection.id}})
      }
      const homeworkDialog = ref(false)
      const hideHomework = () => {
        homeworkDialog.value = false
      }
      const homeworkLesson = ref({})
      const showHomework = (item) => {
        homeworkLesson.value = item
        homeworkDialog.value = true
      }
      const signUpStatusMap = {
        signed_up: "进行中",
        completed: "已完成"
      }
      return {
        param,
        activeId,
        learnRecordList,
        lesson,
        lessonChapterList,
        defaultOpenedIndexList,
        currentChapterSection,
        currentLessonChapter,
        currentLessonChapterSection,
        totalChapterSection,
        customColorMethod,
        formatProgress,
        itemClick,
        learnChapterSection,
        homeworkDialog,
        homeworkLesson,
        showHomework,
        hideHomework,
        signUpStatusMap
      }
    }
  }
</script>

<style lang="scss" scoped>
  .content-container {
    background: #f5f5f5;
  }
  .learn-record-container {
    background-color: #FFFFFF;
    margin: 20px 40px 20px 20px;
  }
  .row {
    height: 100%;
    .el-col {
      height: 100%;
    }
  }
  .learn-record-list {
    width: 100%;
    .learn-record-item:hover {
      background-color: #EEEEEE;
    }
    .learn-record-item {
      cursor: pointer;
      width: calc(100% - 10px);;
      height: 140px;
      margin-right: 3px;
      background: #f8f8f8;
      float: left;
      padding: 20px 16px 34px 16px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      border-bottom: 1px solid #EEEEEE;
      position: relative;
      min-width: 220px;
    }
    .learn-record-item:last-child {
      border: 0;
    }
    .learn-record-item.active {
      border-color: #ecefff;
      background: #ecefff;
      color: #000000;
      .learn-record-date {
        display: block;
      }
    }
    .learn-record-item.active:after {
      content: "";
      height: 0;
      width: 0;
      overflow: hidden;
      top: 43%;
      right: -10px;
      position: absolute;
      border-top: 10px dashed transparent;
      border-bottom: 10px dashed transparent;
      border-left: 10px solid #ecefff;
    }
    .learn-record-tag {
      font-size: 12px;
      line-height: 18px;
      height: 18px;
      padding: 0 4px;
      color: #fff;
      border-radius: 0 2px 2px 0;
      position: absolute;
      right: -1px;
      top: -1px;
      background: #ff6923;
      .top-right-angle {
        top: 0;
        border-top: 10px solid #ff6923;
        position: absolute;
        left: -9px;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
      }
      .bottom-right-angle {
        bottom: 0;
        border-bottom: 10px solid #ff6923;
        position: absolute;
        left: -9px;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
      }
    }
    .learn-record-title {
      font-size: 16px;
      max-height: 50px;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      height: 50px;
    }
    .learn-record-date {
      color: #777777;
    }
    .learn-record-date.active {
      display: block;
    }
  }
  .learn-record-el-col::-webkit-scrollbar {
    display: none;/*隐藏滚动条*/
  }
  .learn-record-detail {
    background: #fff;
    padding: 20px;
    .learn-record-detail-top-left {
      position: relative;
      line-height: 30px;
      height: 36px;
      min-width: 175px;
      display: inline-block;
      box-sizing: content-box;
      .learn-record-detail-top-left-text {
        display: inline-block;
      }
    }
    .learn-record-detail-top-right {
      box-sizing: content-box;
      position: absolute;
      right: 20px;
      top: 20px;
      .ctrl-item {
        float: left;
        margin-right: 10px;
        line-height: 28px;
        height: 28px;
        color: #333;
        cursor: pointer;
      }
      .ctrl-item:hover {
        color: #23b8ff;
      }
      .before-line:before {
        position: relative;
        display: inline-block;
        top: 5px;
        width: 10px;
        height: 20px;
        border-left: 1px solid #ccc;
        content: "";
        vertical-align: top;
      }
    }
    h2 {
      margin: 16px 0;
    }
    .el-menu {
      border: 0;
    }
    .el-menu-item.is-active {
      color: #303133;
    }
    .el-menu-item:focus
    {
      background-color: #ffffff;
    }
    .detail-item-button {
      float: right;
      margin-top: 9px;
    }
    .favorites-cover {
      color: #000000;
      &:hover {
        color: #415fff;
      }
    }
  }
</style>
<style lang="scss">
  body {
    background-color: #f5f5f5!important;
    height: 100%;
  }
  .el-progress-bar {
    padding-right: 85px;
    width: 100%;
    margin-right: -90px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .learn-record-process {
    margin-top: 10px;
    .el-progress__text {
      color: #777777;
    }
  }
  .learn-record-el-col {
    height: 980px!important;
    overflow-y: scroll;
  }
  .el-progress-bar__outer {
    background-color: #999999;
  }
</style>
